<template>
  <div class="macro-map">
    <div id="map" class="micro-map macro-map">
      <Table></Table>
      <chartPanel></chartPanel>
      <map-control :overLayerData="overLayerData"></map-control>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { mapState, mapMutations, mapActions } from "vuex";
import Table from "../mapControl/table";
import chartPanel from "../mapControl/chartPanel";
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import sgisLayerBase from "@/utils/map/sfgis.layer.base.js";
import sgisRegionBase from "@/utils/map/sfgis.region.base.js";
import mapTool from "@/utils/map/sfgis.map.tool.js";
import Layer from "@/utils/map/lib/main.js";
import MapControl from "../mapControl/index.vue";
import data from "./data/data.js";
import overLayersData from "./overlayer.js";
import { debug } from "util";
export default {
  name: "Layer",
  data() {
    return {
      color1: "#409EFF",
      layers: [],
      selectlayer: "",
      map: ""
    };
  },
  watch: {
    overLayerData(now, old) {
      this.overLayerData = now;
    }
  },
  computed: {
    ...mapState({
      showDataTable: state => state.macro.showDataTable,
      showEchartPanel: state => state.macro.showEchartPanel,
    }),
    overLayerData: {
      get: function() {
        return (
          this.$store.state.macro.overLayerData
        ); //methods里面对这个里面有从新赋值的操作
      },
      set: function(newValue) {
        //  console.log(newValue)。//这个newValue能监听到methods里面从新赋值了，这个就是新值.
      }
    }
  },
  components: { MapControl,Table,chartPanel },
  mounted() {
    this.loadMap(); // 添加地图底图
  },
  methods: {
    ...mapMutations([
      "changeShowEchartPanel",
      "changeShowDataTable"
    ]),
    loadMap() {
      sgisMapBase.init("map");
      sgisLayerBase.init(data.map);
      // //初始化一下区划配置信息
      sgisRegionBase.regionCatalog.setRegionCatalogs(data.regioncatalogs.data);
    },
    /* *绘制图层边界 并定位到对应位置 */
    addHLBoundary() {
      // sgisLayerBase.switchBaseLayer(1);
      Layer.hlLayer.addHLBoundary(
        data.regioninfos.data, //区划参数
        "1", //区划类型
        sgisMapBase.getMap() //地区对象
      );
    },
    /**添加区划标签 */
    addRegionLable() {
      Layer.regionLableLayer.createLayer(
        data.lableRegionData.data, //区划参数
        sgisMapBase.getMap() //地图对象
      );
    },
    /**
     * 空间绘制查询-点
     */
    drawSpatialQuery_CIRCLEMARKER() {
      mapTool.drawSpatialQuery("CIRCLEMARKER", "3", "1");
    },
    /**
     * 空间绘制查询-线
     */
    drawSpatialQuery_POLINE() {
      mapTool.drawSpatialQuery("POLINE", "3", "1");
    },
    /**
     * 空间绘制查询-多边形
     */
    drawSpatialQuery_POLYGON() {
      mapTool.drawSpatialQuery("POLYGON", "3", "1");
    },
    /**
     * 空间绘制查询-矩形
     */
    drawSpatialQuery_RECTANGLE() {
      mapTool.drawSpatialQuery("RECTANGLE", "3", "1");
    },
    /**
     * 空间绘制查询-圆
     */
    drawSpatialQuery_CIRCLE() {
      mapTool.drawSpatialQuery("CIRCLE", "3", "1");
    },
    /**
     * 邻域分析
     */
    drawVicinityQuery() {
      mapTool.drawVicinityQuery("3", "1");
    },
    /**
     * 缓存分析
     */
    drawBufferQuery() {
      //换从分析分为两种类型，绘制=DRAW和选择地物=SELECT
      //1  绘制类型的
      mapTool.drawBufferQuery("3", "1", "DRAW", "0.1");
      // //2 选择地物的
      // mapTool.setBufferDataSetName("ST_R_HELIU");  //以河流为地物
      // mapTool.drawBufferQuery("3","1","SELECT","0.001");
    },
    /* *获取所有图层 */
    initLayers() {
      this.layers = sgisLayerBase.getOverLayers();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.macro-map {
  width: 100%;
  height: 100%;
  background: -webkit-gradient(
    linear,
    0% 0%,
    0% 20%,
    from(#ace0f9),
    to(#fff1eb)
  ); /*谷歌*/
}
</style>
